<!DOCTYPE html>
<html lang="zh">
  <head>
    <meta charset="utf-8" />
    <meta
      name="viewport"
      content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no"
    />
    <title>分页 - 光年(Light Year Admin)后台管理系统模板</title>
    <meta
      name="keywords"
      content="LightYear,光年,后台模板,后台管理系统,光年HTML模板"
    />
    <meta
      name="description"
      content="LightYear是一个基于Bootstrap v3.3.7的后台管理系统的HTML模板。"
    />
    <meta name="author" content="yinqi" />
    <link href="../css/bootstrap.min.css" rel="stylesheet" />
    <link href="../css/materialdesignicons.min.css" rel="stylesheet" />
    <link href="../css/style.min.css" rel="stylesheet" />
    <!-- 请勿在项目正式环境中引用该 layui.css 地址 -->
    <link
      href="https://unpkg.com/layui@2.9.9/dist/css/layui.css"
      rel="stylesheet"
    />
  </head>

  <body>
    <div class="lyear-layout-web">
      <div class="lyear-layout-container">
        // region
        <!--左侧导航-->
        <!--左侧导航-->
        <aside class="lyear-layout-sidebar">
          <!-- logo -->
          <div id="logo" class="sidebar-header">
            <a href="../index.html"
              ><img
                src="../images/logo-sidebar.png"
                title="LightYear"
                alt="LightYear"
            /></a>
          </div>
          <div class="lyear-layout-sidebar-scroll">
            <nav class="sidebar-main">
              <ul class="nav nav-drawer">
                <li class="nav-item nav-item-has-subnav">
                  <a href="javascript:void(0)"
                    ><i class="mdi mdi-file-outline"></i> 学生管理</a
                  >
                  <ul class="nav nav-subnav">
                    <li>
                      <a href="../lms-admin/student_table.html">学生列表</a>
                    </li>
                  </ul>
                </li>

               
            <li class="nav-item nav-item-has-subnav">
              <a href="javascript:void(0)"
                ><i class="mdi mdi-file-outline"></i> 班级管理</a
              >
              <ul class="nav nav-subnav">
                <li>
                  <a href="../lms-teacher/create_clazz.html">创建班级</a>
                </li>
                <li>
                  <a href="../lms-admin/clazz_info.html">学习情况</a>
                </li>
              </ul>
            </li>

                <li class="nav-item nav-item-has-subnav">
                  <a href="javascript:void(0)"
                    ><i class="mdi mdi-file-outline"></i> 作业管理</a
                  >
                  <ul class="nav nav-subnav">
                    <li>
                      <a href="../lms-teacher/create_assignment.html"
                        >发布作业</a
                      >
                    </li>
                    <li>
                      <a href="../lms-teacher/assignment_list.html">作业列表</a>
                    </li>
                  </ul>
                </li>
                <li class="nav-item nav-item-has-subnav">
                  <a href="javascript:void(0)"
                    ><i class="mdi mdi-file-outline"></i> 问卷管理</a
                  >
                  <ul class="nav nav-subnav">
                    <li>
                      <a href="../lms-teacher/create_questionnaire.html"
                        >发布问卷</a
                      >
                    </li>
                    <li>
                      <a href="../lms-teacher/questionnaire_list.html"
                        >问卷列表</a
                      >
                    </li>
                  </ul>
                </li>
                <li class="nav-item nav-item-has-subnav">
                  <a href="javascript:void(0)"
                    ><i class="mdi mdi-file-outline"></i> 论坛管理</a
                  >
                  <ul class="nav nav-subnav">
                    <li>
                      <a href="../lms-teacher/create_forum.html">发布帖子</a>
                    </li>
                    <li>
                      <a href="../lms-teacher/forum_list.html">帖子列表</a>
                    </li>
                    <li>
                      <a href="../lms-teacher/forum_list_self.html">我的帖子</a>
                    </li>
                  </ul>
                </li>
              </ul>
            </nav>
          </div>
        </aside>
        <!--End 左侧导航-->

        <!--头部信息-->
        <header class="lyear-layout-header">
          <nav class="navbar navbar-default">
            <div class="topbar">
              <div class="topbar-left">
                <div class="lyear-aside-toggler">
                  <span class="lyear-toggler-bar"></span>
                  <span class="lyear-toggler-bar"></span>
                  <span class="lyear-toggler-bar"></span>
                </div>
                <span class="navbar-page-title"> 后台首页 </span>
              </div>

              <div class="topbar-right">
                <a href="javascript:void(0)" data-toggle="dropdown">
                  <span>笔下光年 <span class="caret"></span></span>
                </a>
                <ul class="dropdown-menu dropdown-menu-right">
                  <li>
                    <a href="../lyear_pages_login.html"
                      ><i class="mdi mdi-logout-variant"></i> 退出登录</a
                    >
                  </li>
                </ul>
              </div>
            </div>
          </nav>
        </header>
        <!--End 头部信息-->

        <!--页面主要内容-->
        <main class="lyear-layout-content">
          <div class="container-fluid">
            <div class="row" style="margin-top: 3%">
              <div id="newDiv"></div>

              <div class="table-responsive">
                <table class="layui-hide" id="ID-table-demo-data"></table>
              </div>
            </div>
          </div>
        </main>
        <!--End 页面主要内容-->
      </div>
    </div>

    <script type="text/javascript" src="../js/jquery.min.js"></script>
    <script type="text/javascript" src="../js/bootstrap.min.js"></script>
    <script
      type="text/javascript"
      src="../js/perfect-scrollbar.min.js"
    ></script>
    <script type="text/javascript" src="../js/main.min.js"></script>
    <!-- 请勿在项目正式环境中引用该 layui.js 地址 -->
    <script src="https://unpkg.com/layui@2.9.9/dist/layui.js"></script>
    <script type="text/javascript" src="../js/http.js"></script>

    <script type="text/javascript">
      var type = window.localStorage.getItem("type");

      // if (type == 0) {
      //   $("#newDiv").html(`<div class="layui-form" style="margin: 20px">
      //           <div class="layui-form-item">
      //             <label class="layui-form-label">班级：</label>
      //             <div class="layui-input-inline">
      //               <select id="selectData" lay-filter="selectData">
      //                 <option value="">请选择</option>
      //               </select>

      //               <select id="selectType" lay-filter="selectData">
      //                 <option value="1">学生</option>
      //                 <option value="2">教师</option>
      //               </select>
      //             </div>
      //           </div>
      //         </div>

      //         `);
      // }

      if (type == 0) {
        $("#newDiv").html(`<div class="layui-form" style="margin: 20px">
                <div class="layui-form-item">
                  <label class="layui-form-label">班级：</label>
                  <div class="layui-input-inline">
                    <select id="selectData" lay-filter="selectData">
                      <option value="">请选择</option>
                    </select>

                  </div>
                </div>
              </div>

              `);
      }

      var clazz;
      var clazzId;
      var table;
      var selectedType;

      var res = httpListClazz({});
      if (res.success) {
        console.log("数据", res.data);
        clazz = res.data.records;
      } else {
        alert("查询失败！");
      }

      // 假设我们有一个option数组
      const options = [];
      for (let i in clazz) {
        options.push({ text: clazz[i].cname, value: clazz[i].cid });
      }

      // 渲染下拉框选项
      function renderSelectOptions(data) {
        var selectElem = $("#selectData");
        for (var i = 0; i < data.length; i++) {
          var option =
            '<option value="' +
            data[i].value +
            '">' +
            data[i].text +
            "</option>";
          selectElem.append(option);
        }
      }

      if (type == 2) {
        // 教师
        layui.use("table", function () {
          var table = layui.table;
          var layer = layui.layer;
          var form = layui.form;

          var res2 = httpListClazzMembers({
            id: 0,
            type: 1,
          });

          // 已知数据渲染
          var inst = table.render({
            elem: "#ID-table-demo-data",
            cols: [
              [
                //标题栏
                { field: "id", title: "ID", width: 80, sort: true },
                { field: "name", title: "姓名", width: 120 },
                { field: "phone", title: "手机号", width: 100 },
                { field: "age", title: "年龄", minwidth: 100 },
                { field: "sex", title: "性别", width: 100 },
                { field: "sex", title: "性别", width: 100 },
                {
                  title: "个人信息",
                  width: 200,
                  templet: function (d) {
                    return (
                      '<button class="layui-btn layui-btn-xs edit-btn" data-id="' +
                      d.id +
                      '">跳转</button>'
                    );
                  },
                },
              ],
            ],
            data: res2.data.records,
            //skin: 'line', // 表格风格
            //even: true,
            page: true, // 是否显示分页
            limits: [5, 10, 15],
            limit: 5, // 每页默认显示的数量
          });
          // 动态绑定点击事件
          $(document).on("click", ".edit-btn", function () {
            var id = $(this).data("id");
            // 获取该行数据
            var rowData = table.cache["ID-table-demo-data"].find(
              (row) => row.id == id
            );

            console.log(rowData);

            window.localStorage.setItem("studentInfo", JSON.stringify(rowData));

            window.location =
              window.location.href.split("/student_table.html")[0] +
              "/student_info.html";
          });
        });
      } else {
        //管理员
        layui.use(["form", "jquery"], function () {
          var form = layui.form;
          var $ = layui.jquery;

          renderSelectOptions(options); // 渲染下拉框选项
          form.render("select"); // 更新渲染

          // 监听下拉框选择事件
          form.on("select(selectData)", function (data) {
            clazzId = $("#selectData").val();

            // selectedType = $("#selectType").val();
            selectedType = 1;

            layui.use("table", function () {
              var table = layui.table;
              var layer = layui.layer;
              var form = layui.form;

              var res2 = httpListClazzMembers({
                id: clazzId,
                type: selectedType,
              });

              // 已知数据渲染
              var inst = table.render({
                elem: "#ID-table-demo-data",
                cols: [
                  [
                    //标题栏
                    { field: "id", title: "ID", width: 80, sort: true },
                    { field: "name", title: "姓名", width: 120 },
                    { field: "phone", title: "手机号", width: 100 },
                    { field: "age", title: "年龄", minwidth: 100 },
                    { field: "sex", title: "性别", width: 100 },
                    {
                      title: "个人信息",
                      width: 200,
                      templet: function (d) {
                        return (
                          '<button class="layui-btn layui-btn-xs edit-btn" data-id="' +
                          d.id +
                          '">跳转</button>' +
                          '<button class="layui-btn layui-btn-xs delete-btn" data-id="' +
                          d.id +
                          '">删除</button>'
                        );
                      },
                    },
                  ],
                ],
                data: res2.data.records,
                //skin: 'line', // 表格风格
                //even: true,
                page: true, // 是否显示分页
                limits: [5, 10, 15],
                limit: 5, // 每页默认显示的数量
              });
              // 动态绑定点击事件
              $(document).on("click", ".edit-btn", function () {
                if (type == 0) {
                }
                var id = $(this).data("id");
                // 获取该行数据
                var rowData = table.cache["ID-table-demo-data"].find(
                  (row) => row.id == id
                );

                console.log(rowData);

                window.localStorage.setItem(
                  "studentInfo",
                  JSON.stringify(rowData)
                );

                window.location =
                  window.location.href.split("/student_table.html")[0] +
                  "/student_info.html";
              });

              // 动态绑定删除按钮点击事件
              $(document).on("click", ".delete-btn", function () {
                var id = $(this).data("id");
                layer.confirm(
                  "确认删除该条记录吗？",
                  { icon: 3, title: "提示" },
                  function (index) {
                    var res = httpDelStudent({
                      id: id,
                    });
                    if (res.success) {
                      layer.msg("删除成功！");
                      location.reload();
                    } else {
                      layer.msg("删除失败！");
                    }
                    layer.close(index); // 关闭确认框
                  }
                );
              });
            });
          });
        });
      }
    </script>
  </body>
</html>
